<template>
  <div >
    <label v-for="(item) in dataList" :key="item.id">
      <el-submenu :class="isCollapse?'pack-up':'unfold'" :index="item.id" v-if="item.children">
        <template #title>
          <i  class="el-icon-location" ></i>
          <span>{{item.name}}</span>
        </template>
        <label>
          <menu-tree  @setScrollbar="setScrollbar" :dataList="item.children"></menu-tree>
        </label>
      </el-submenu>
      <el-menu-item v-else  @click="skipRouter(item.componentName,item)" :index="item.componentName">
        <template #title>
          <span >{{item.name}}</span>
        </template>
      </el-menu-item>
    </label>
  </div>
</template>

<script>
export default {
  name: "menu-tree",
  props:{
    dataList: {
      type: Array
    },
    isCollapse:{
      type: Boolean,
      default: false

    }
  },
  emits:["setScrollbar"],
  methods:{
    skipRouter(componentName, item){
      let ids = this.$store.getters["page-tabs/getLabIds"]
      if(ids) {
           if(ids.indexOf(item.componentName) === -1){
             this.$store.commit('page-tabs/addLabIds',item.componentName)
             this.$store.commit('page-tabs/addLabs',item)

           }
      }else{
        this.$store.commit('page-tabs/addLabIds',item.componentName)
        this.$store.commit('page-tabs/addLabs',item)
      }
      this.$store.commit('page-tabs/setSelectTag',componentName)
      this.$router.push({name:componentName})
      this.setScrollbar(item.id)
    },
    setScrollbar(id){
      this.$emit("setScrollbar",id)
    }
  }
}
</script>
<style>
.pack-up .el-submenu__icon-arrow{
  display: none !important;
}
</style>
<style scoped>
.el-menu--collapse .el-submenu .el-submenu__title span{
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;

}

</style>
